<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../assets/images/logo.png">
    <title>Document</title>

    <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../assets/css/normalize.css">
    <link rel="stylesheet" href="../assets/css/index.css">

    <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <script src="../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
    <!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
    <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../assets/js/common.js"></script>

</head>

<body>

<div id="app">
    <!-- 引入头部组件 -->
    <my-header></my-header>

    <!-- 内容：关键字搜索 -->
    <!-- 类解释：navbar-form【导航栏中的表单】 -->
    <div class="navbar-form searchdiv">
        <form action="">
            <!-- 类解释：input-group【输入组】 -->
            <div class="input-group">
                <!-- 类解释：form-control【表单控件】，自定义类search -->
                <input type="text" v-model="keyword" class="form-control search" placeholder="搜索关键字"/>
                <!-- 类解释：输入组文本，背景颜色蓝色 -->
                <a class="input-group-text bg-primary" href="javascript:;" @click="search">
                    <i class="bi bi-search"></i>
                </a>
            </div>
        </form>
    </div>

    <!--
        主体内容
        container：设置版心为两端留白
        style="margin-top: 80px;"：设置版心上外边距为60px
    -->
    <main class="container" style="margin-top: 70px;">
        <!-- row：将整个版心设置为一行，开启网格系统 -->
        <div class="row">
            <!-- col-md-8：设置主题内容左半部分为8格
                col-xs-12：设置主体内容在xs尺寸下占12格
            -->
            <div class="col-md-8 col-xs-12">
                <!-- 卡片一
                        card：开启卡片
                        mt-3：每个卡片距离上外边距为rem:3
                -->
                <div class="card mt-3" v-for="page in pageList">
                    <!--
                        card-body：指定卡片内容部分
                        d-flex：将卡片内容部分开启弹性布局
                    -->
                    <div class="card-body d-flex">
                        <!--
                            card-img-top：设置卡片图片置位顶部
                            card-cover：给卡片图片取一个类名，用于在css文件中设置封面的宽高
                            img-fluid：响应式图片，跟随屏幕大小自动缩放图片比例
                        -->
                        <a href="#">
                            <img :src="page.articlePic" class="card-img-top card-cover img-fluid" alt="...">
                        </a>
                        <!-- 设置封面图片右边内容div
                                ms-3：距离左边封面3rem
                        -->
                        <div class="ms-3">
                            <!--
                                card-link：指定a标签为卡片链接
                                text-decoration-none：去掉a标签自带样式
                            -->
                            <a href="#" class="card-link text-decoration-none text-primary">
                                <h5>{{ page.articleName }}</h5>
                            </a>
                            <!--
                                card-text：指定为卡片文本
                                opacity-50：透明度50
                                style="font-family: Georgia"：指定文本字体格式
                                &bull;：•的转译字符
                            -->
                            <p style="font-family: Georgia" class="card-text opacity-50">
                                &bull; {{ page.updateTime }}
                            </p>
                            <!-- card-text：指定为卡片文本 -->
                            <p class="card-text">{{ page.articleRemark }}</p>
                        </div>
                    </div>
                    <!-- 卡片中间的线使用hr实现 -->
                    <hr class="mx-4 my-0">
                    <!--
                        d-flex：开启卡片底部内容为弹性布局
                        justify-content-between：设置底部内容水平对齐方式
                        align-items-center：设置底部内容垂直对齐方式
                        px-4：让底部内容的内水平边距设置为4rem，这样内容更居中
                        style="height: 60px;"：设置底部内容高度为60px
                    -->
                    <div class="d-flex justify-content-between align-items-center px-4" style="height: 60px;">
                        <div>
                            <i class="bi bi-folder2-open opacity-50"></i>
                            <span class="card-text">{{ page.articleTag }}</span>
                            <!--                                <i class="bi bi-tags opacity-50"></i>-->
                            <!--                                <span class="card-text">Java数据类型</span>-->
                        </div>
                        <a :href="'blog-detail.html?id='+page.id+'&name=zs&age=11'"
                           class="card-link btn btn-primary read" @click="read(page.id)">阅读全文</a>
                    </div>
                </div>

                <!--
                    分页部分
                    text-end：设置分页位置靠右
                    overflow-auto：溢出自适应，屏幕缩小后分页栏有水平滚动条
                -->
                <div class="text-end my-3 overflow-auto" style="margin-bottom: 50px;">
                    <el-pagination :current-page="currentPage" :page-size="pageSize"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :page-sizes="[5, 10, 20, 30]"
                                   layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>

            <!-- 侧边栏
                sidebar：用于使用jQuery引入侧边栏组件
                col-md-4：此侧边栏站整个网格的4份
                mb-5：侧边栏距离下面5rem
                d-none d-sm-block：在xs尺寸下隐藏，适用于手机
            -->
            <div class="sidebar col-md-4 mb-5 d-none d-sm-block">
                <my-sidebar></my-sidebar>
            </div>
        </div>
    </main>
</div>


<script>
    /* 必须要挂载分页栏才会起作用 */
    new Vue({
        el: "#app",
        data: {
            pageList: [],
            currentPage: 1,
            pageSize: 5,
            total: 0,
            keyword: null,
        },
        methods: {
            search() {
                this.loadPageList();
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.loadPageList()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.loadPageList()
            },
            loadPageList(typeId) {
                let data = {
                    page: this.currentPage,
                    size: this.pageSize,
                    keyword: this.keyword,
                    typeId: typeId
                }
                this.$http.post("/article/selectPage", data).then(res => {
                    console.log(res)
                    this.pageList = res.data.data.list
                    this.total = res.data.data.total;
                }).catch(res => {

                })
            },
            handleUrl(url) {
                if (url) {//http://127.0.0.1/views/blog-detail.html?id=1&name=zs&age=11
                    //定义接收对象
                    var map = [];
                    var split = url.split("?");
                    if (split[1]) {//id=1&name=zs&age=11
                        var split1 = split[1].split("&");
                        split1.forEach((value, index) => {
                            var split2 = value.split("=");
                            map.push({
                                key: split2[0],
                                value: split2[1]
                            })
                        })
                        return map;
                    }
                }
            },

            read(articleId) {
                this.$http.get("/article/read/" + articleId, {}).then(res => {
                    console.log(res.data.data)
                    if (res.data.data) {
                        // 找到对应文章并更新阅读量
                        this.pageList.forEach(page => {
                            if (page.id === articleId) {
                                page.articleReadCount = res.data.data;
                            }
                        });
                    }
                })
            },
        },
        components: {
            // 将组建加入组建库
            'my-header': httpVueLoader('./common/header.vue'),
            'my-sidebar': httpVueLoader('./common/sidebar.vue')
        },
        mounted() {
            let map = this.handleUrl(location.href)
            if (map) {
                this.loadPageList(map[0].value);
            } else {
                this.loadPageList();
            }
            this.search();
        },
    })
</script>
</body>
</html>
